import React, { useState, useEffect, useRef } from 'react'
import { QuestionCircleOutlined, SyncOutlined, CustomerServiceOutlined, RedditOutlined } from '@ant-design/icons';
import { FloatButton, Collapse } from 'antd';
import type { CollapseProps } from 'antd';
import { } from 'antd';
import './index.css'
interface Message {
    id: number;
    text: string;
    sender: 'user' | 'bot';
}

const text1 = `
    登录发票问题
`;
const text2 = `
    不管用
`;
const text3 = `
    最划算的充值
`;

const items: CollapseProps['items'] = [
    {
        key: '1',
        label: '登录发票问题',
        children: <p>{text1}</p>,
    },
    {
        key: '2',
        label: 'AI智能',
        children: <p>{text2}</p>,
    },
    {
        key: '3',
        label: '会员问题',
        children: <p>{text3}</p>,
    },
];

const Index: React.FC = () => {
    const [isVisible, setIsVisible] = useState<boolean>(false);

    // 切换客服框的显示和隐藏
    const toggleChatBox = () => {
        setIsVisible(!isVisible);
    };
    const [messages, setMessages] = useState<Message[]>([]);
    const [inputValue, setInputValue] = useState('');
    const messagesEndRef = useRef<HTMLDivElement>(null);

    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };

    useEffect(() => {
        scrollToBottom();
    }, [messages]);

    const handleSendMessage = () => {
        if (inputValue.trim() === '') return;

        const newMessage: Message = {
            id: messages.length + 1,
            text: inputValue,
            sender: 'user',
        };

        setMessages((prevMessages) => [...prevMessages, newMessage]);
        setInputValue('');

        // 模拟接收客服消息
        setTimeout(() => {
            const botMessage: Message = {
                id: messages.length + 2,
                text: `Hi~我是创客贴机器人客服，可以输入问题向我提问哦~`,
                sender: 'bot',
            };
            setMessages((prevMessages) => [...prevMessages, botMessage]);
        }, 1000);
    };

    const options = ['Option 1', 'Option 2', 'Option 3'];

    const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
        setInputValue(event.target.value);
    };
    return (
        <div>

            <FloatButton.Group shape="square" style={{ insetInlineEnd: 26 }}>
                <FloatButton tooltip={<div>疑问</div>} icon={<QuestionCircleOutlined />} />
                <FloatButton onClick={toggleChatBox} tooltip={<div>客服</div>} icon={<CustomerServiceOutlined />} />
                <FloatButton tooltip={<div>刷新</div>} icon={<SyncOutlined />} />
                <FloatButton.BackTop visibilityHeight={0} tooltip={<div>回到顶部</div>} />
            </FloatButton.Group>
            {isVisible && (
                <div className="chat-box">
                    <div className="chattop">
                        <span><RedditOutlined /></span>
                        <p>创客贴机器人客服小助手</p>
                        <p onClick={toggleChatBox} className='jian'>—</p>
                    </div>
                    <div className="chatmain">
                        {messages.map((message) => (
                            <div
                                key={message.id}
                                style={{
                                    textAlign: message.sender === 'user' ? 'right' : 'left',
                                    marginBottom: '10px',
                                }}
                            >
                                <div
                                    style={{
                                        display: 'inline-block',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        backgroundColor: message.sender === 'user' ? '#007bff' : '#fff',
                                        color: message.sender === 'user' ? '#fff' : '#000',
                                    }}
                                >
                                    {message.text}
                                </div>
                            </div>
                        ))}
                        <div>


                            <select value={inputValue} onChange={handleSelectChange}>
                                <Collapse accordion items={items} />
                                {options.map((option, index) => (
                                    <option key={index} value={option}>
                                        {option}
                                    </option>
                                ))}
                            </select>
                        </div>
                        <div ref={messagesEndRef} />
                    </div>
                    <div className='chatfooter'>
                        <div className='rengong'></div>
                        <div className='inp'>
                            <input
                                type="text"
                                value={inputValue}
                                onChange={(e) => setInputValue(e.target.value)}
                                placeholder='很高兴为您服务，请描述您的问题'
                            />
                            <button onClick={handleSendMessage}>
                                发送
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}

export default Index